{% extends "admin/base_site.html" %}
{% load i18n static %}

{% block extrastyle %}
  {{ block.super }}
  <link rel="stylesheet" href="{% static 'admin/css/dashboard.css' %}">
  <style>
    .dashboard-container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin-top: 20px;
    }
    .stats-box {
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      padding: 20px;
      flex: 1;
      min-width: 200px;
    }
    .stats-number {
      font-size: 32px;
      font-weight: bold;
      color: #447e9b;
    }
    .stats-title {
      color: #666;
      margin-bottom: 10px;
      font-size: 14px;
      text-transform: uppercase;
    }
    .chart-container {
      width: 100%;
      min-height: 300px;
      margin-top: 20px;
    }
    .data-table {
      width: 100%;
      border-collapse: collapse;
    }
    .data-table th, .data-table td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }
    .data-table th {
      background-color: #f2f2f2;
    }
    .data-table tr:nth-child(even) {
      background-color: #f9f9f9;
    }
    .flex-100 {
      flex-basis: 100%;
    }
  </style>
{% endblock %}

{% block extrahead %}
  {{ block.super }}
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
{% endblock %}

{% block breadcrumbs %}
<div class="breadcrumbs">
  <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
  &rsaquo; {% trans 'Dashboard' %}
</div>
{% endblock %}

{% block content %}
<div id="content-main">
  <h1>{% trans 'Music Recommendation System Dashboard' %}</h1>
  
  <!-- 数据摘要 -->
  <div class="dashboard-container">
    <div class="stats-box">
      <div class="stats-title">{% trans 'Total Music' %}</div>
      <div class="stats-number">{{ total_music }}</div>
    </div>
    
    <div class="stats-box">
      <div class="stats-title">{% trans 'Total Users' %}</div>
      <div class="stats-number">{{ total_users }}</div>
    </div>
    
    <div class="stats-box">
      <div class="stats-title">{% trans 'Total Ratings' %}</div>
      <div class="stats-number">{{ total_ratings }}</div>
    </div>
    
    <div class="stats-box">
      <div class="stats-title">{% trans 'Total Comments' %}</div>
      <div class="stats-number">{{ total_comments }}</div>
    </div>
    
    <!-- 用户增长图表 -->
    <div class="stats-box flex-100">
      <div class="stats-title">{% trans 'User Growth (Last 4 Weeks)' %}</div>
      <div class="chart-container">
        <canvas id="userGrowthChart"></canvas>
      </div>
    </div>
    
    <!-- 评分最高的音乐 -->
    <div class="stats-box">
      <div class="stats-title">{% trans 'Top Rated Music' %}</div>
      <table class="data-table">
        <thead>
          <tr>
            <th>{% trans 'Title' %}</th>
            <th>{% trans 'Artist' %}</th>
            <th>{% trans 'Rating' %}</th>
          </tr>
        </thead>
        <tbody>
          {% for music in top_music %}
          <tr>
            <td>{{ music.title }}</td>
            <td>{{ music.artist }}</td>
            <td>{{ music.rating }}/5</td>
          </tr>
          {% empty %}
          <tr>
            <td colspan="3">{% trans 'No ratings yet' %}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    
    <!-- 最近上传的音乐 -->
    <div class="stats-box">
      <div class="stats-title">{% trans 'Recently Added Music' %}</div>
      <table class="data-table">
        <thead>
          <tr>
            <th>{% trans 'Title' %}</th>
            <th>{% trans 'Artist' %}</th>
            <th>{% trans 'Date' %}</th>
          </tr>
        </thead>
        <tbody>
          {% for music in recent_music %}
          <tr>
            <td>{{ music.title }}</td>
            <td>{{ music.artist }}</td>
            <td>{{ music.upload_date|date:"Y-m-d" }}</td>
          </tr>
          {% empty %}
          <tr>
            <td colspan="3">{% trans 'No music yet' %}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    
    <!-- 最近的评论 -->
    <div class="stats-box flex-100">
      <div class="stats-title">{% trans 'Recent Comments' %}</div>
      <table class="data-table">
        <thead>
          <tr>
            <th>{% trans 'User' %}</th>
            <th>{% trans 'Music' %}</th>
            <th>{% trans 'Comment' %}</th>
            <th>{% trans 'Date' %}</th>
          </tr>
        </thead>
        <tbody>
          {% for comment in recent_comments %}
          <tr>
            <td>{{ comment.user.username }}</td>
            <td>{{ comment.music.title }}</td>
            <td>{{ comment.text|truncatechars:50 }}</td>
            <td>{{ comment.created_at|date:"Y-m-d H:i" }}</td>
          </tr>
          {% empty %}
          <tr>
            <td colspan="4">{% trans 'No comments yet' %}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // 用户增长图表
    var ctx = document.getElementById('userGrowthChart').getContext('2d');
    var userGrowthChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: [{% for week in user_growth %}'{{ week.week }}'{% if not forloop.last %}, {% endif %}{% endfor %}],
        datasets: [{
          label: '{% trans "New Users" %}',
          data: [{% for week in user_growth %}{{ week.count }}{% if not forloop.last %}, {% endif %}{% endfor %}],
          backgroundColor: 'rgba(68, 126, 155, 0.6)',
          borderColor: 'rgba(68, 126, 155, 1)',
          borderWidth: 1
        }]
      },
      options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true,
            title: {
              display: true,
              text: '{% trans "Number of New Users" %}'
            }
          },
          x: {
            title: {
              display: true,
              text: '{% trans "Week" %}'
            }
          }
        }
      }
    });
  });
</script>
{% endblock %} 